<template>
  <!-- 抽屉 -->
  <div class="drawer" :style="{ right: right + 'px' }">
    <div class="head">
      <div class="title">当前播放</div>
      <div class="explain">
        <span class="sum">总{{ songs.length }}首</span>
        <span class="del_all" @click="delAllSong"></span>
      </div>
    </div>
    <div class="content">
      <div
        class="item"
        v-for="(item, index) in songs"
        :key="item.id"
        :style="{ backgroundColor: index % 2 === 0 ? '#393939' : '' }"
        @dblclick="playSong(item)"
      >
        <div class="icon">
          <span v-show="currentPlaySong.id === item.id"></span>
        </div>
        <div class="name_alia">
          <span
            class="name"
            :class="currentPlaySong.id === item.id ? 'active' : ''"
            >{{ item.name }}</span
          >
          <span class="alia" v-if="item.al.alia && item.al.alia.length !== 0"
            >({{ item.al.alia.join("/") }})</span
          >
        </div>
        <div
          class="singer"
          :class="currentPlaySong.id === item.id ? 'active' : ''"
        >
          {{ item.ar.map((ele) => ele.name).join("/") }}
        </div>
        <div class="time">{{ getTimer(item.dt) }}</div>
        <div class="del" @click="delSongClick(item)"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import { mapGetters, useStore } from "vuex";
import { completeFormatDate } from "@/utils/formate.js";
export default defineComponent({
  name: "Drawer",
  setup() {
    const store = useStore();
    let musicListState = computed(
      mapGetters(["getMusicListState"]).getMusicListState.bind({
        $store: store,
      })
    );
    let currentPlaySong = computed(
      mapGetters(["getCurrentPlaySong"]).getCurrentPlaySong.bind({
        $store: store,
      })
    );
    let songs = computed(
      mapGetters(["getSongs"]).getSongs.bind({
        $store: store,
      })
    );
    let data = reactive({
      right: -450,
    });

    watch(
      () => musicListState.value,
      () => {
        if (musicListState.value) {
          data.right = 0;
        } else {
          data.right = -450;
        }
      }
    );

    // 获取时长
    let getTimer = (timer) => {
      let time = new Date(timer);
      return completeFormatDate(time, "mm:ss");
    };

    // 双击播放歌曲
    let playSong = (item) => {
      store.dispatch("addPlaySong", item);
    };

    // 从列表中删除某首音乐
    let delSongClick = (item) => {
      store.dispatch("delSong", item);
    };

    // 删除全部的列表音乐
    let delAllSong = () => {
      store.dispatch("delAllSong");
    };

    return {
      ...toRefs(data),
      songs,
      currentPlaySong,
      getTimer,
      playSong,
      delSongClick,
      delAllSong,
    };
  },
});
</script>
<style scoped>
.drawer {
  width: 450px;
  height: calc(100vh - 65px - 80px);
  background-color: #222222;

  position: fixed;
  top: 80px;
  right: 0;
  bottom: 65px;
  z-index: 999;

  transition: all 0.3s;

  overflow-y: auto;
}

.head {
  width: 100%;
  padding: 20px 18px;
}
.title {
  font-size: 24px;
  color: #f2f2f2;
}
.explain {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}
.sum {
  font-size: 16px;
  color: #ccc;
}
.del_all {
  font-size: 16px;
  color: #c20c0c;
  cursor: pointer;
}
.content {
  width: 100%;
}
.item {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
  cursor: default;
  padding: 8px 12px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;
}
.icon {
  width: 5%;
  color: #c20c0c;
  margin-right: 8px;
}
.name_alia {
  width: 55%;
  color: #d3d3d3;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.alia {
  color: #5e5e5e;
}
.singer {
  flex: 1;
  color: #ccc;
  margin: 0 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.time {
  width: 10%;
  color: #999;
  margin-right: 8px;
}
.del {
  width: 5%;
  color: #ccc;
}
.item:hover {
  background-color: #3d3d3d !important;
}
.active {
  color: #c20c0c;
}
</style>
